<template>
  <div>
    <h2>文章列表页</h2>
    <!-- 1.0 表格部分 -->
    <!-- 官方手册：https://element.eleme.io/#/zh-CN/component/table -->
    <el-table
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="50"
      > </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        width="400"
      > </el-table-column>
      <el-table-column
        prop="create_date"
        label="创建时间"
      >
        <!-- 通过 slot 插槽，实现自定义内容渲染 -->
        <template slot-scope="scope">
          {{ scope.row.create_date.slice(0,10) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="$router.push(`/postedit?id=${scope.row.id}`)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 2.0 分页器部分 -->
    <!-- 官方手册：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <el-row
      type="flex"
      justify="center"
    >
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import { getPostList } from "@/api";
export default {
  data() {
    return {
      list: [],
      pageSize: 5,
      pageIndex: 1,
      currentPage: 1,
      total: 0,
    };
  },
  created() {
    this.getPostListData();
  },
  methods: {
    getPostListData() {
      // 获取文章列表页的接口支持分页参数
      getPostList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
      }).then((res) => {
        console.log(res.data.data);
        // 把获取到的数据绑定到 data 中
        this.list = res.data.data;
        // 把总数页存起来，用于分页器
        this.total = res.data.total;
      });
    },
    // 点击页容量，自动触发的事件处理函数
    handleSizeChange(pageSize) {
      console.log("handleSizeChange事件处理函数触发了", pageSize);
      // 更新页容量
      this.pageSize = pageSize;
      // 根据新的页容量，发送新的请求，内部更新 list，表格就会自动渲染
      this.getPostListData();
    },
    // 点击页码是，自动触发的事件处理函数
    handleCurrentChange(pageIndex) {
      console.log("handleCurrentChange事件处理函数触发了", pageIndex);
      // 把点击的页码更新到 pageIndex 数据中
      this.pageIndex = pageIndex;
      // 根据新的页码，发送新的请求，内部更新 list，表格就会自动渲染
      this.getPostListData();
    },
  },
};
</script>

<style>
</style>